<template>
	<van-nav-bar title="退货详情" left-text="" left-arrow @click-left="goBack" />
	<section class="aui-flexView">
		<!-- 订单详细 -->
		<section class="aui-scrollView">
			<!-- 订单状态 -->
			<div class="aui-pay-change">
				<div class="aui-flex">
					<div class="aui-flex-box">
						<h3>{{ info.status_text }}</h3>
					</div>
					<div class="aui-pay-zfb">
						<img src="/assets/images/icon-zfb.png" alt="" />
					</div>
				</div>
			</div>
			<van-cell-group>
				<van-cell
					title="退货地址："
					v-if="info.status == -2 || info.status == -3"
				>
					<!-- 使用 title 插槽来自定义标题 -->
					<template #value>
						<van-cell title="厂家联系人" :value="info.manufacturer.telephone" />
						<div class="lable">{{ info.manufacturer.address }}</div>
					</template>
				</van-cell>
				<van-cell title="退货理由：" :value="info.refundreason" />
				<van-cell
					title="寄件地址："
					v-if="info.status== -2 || info.status== -3"
				>
				<template #value v-if="info.back">
						<van-cell :title="info.back.contact" :value="info.back.phone" />
						<div class="lable">{{ info.back.address_text}}</div>
					</template>
			</van-cell>
				<van-cell title="商家协商：" :value="info.examinereason" />
			</van-cell-group>

			<div class="aui-commodity-bg" style="background: transparent">
				<div
					style="margin-bottom: 10px; background: #f5f5f5"
					v-for="item in info.proinfo"
				>
					<!-- 订单商品 -->
					<div class="aui-flex">
						<div class="aui-commodity-img">
							<img :src="item.product.thumbs_text" />
						</div>
						<div class="aui-flex-box">
							<h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
							<p>商品单价：￥{{ item.price }}</p>
							<span class="aui-barter-time">七天退换</span>
						</div>
						<div>
							<h5>￥{{ item.total }}</h5>
							<p class="aui-sml-text">X{{ item.pronum }}</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 物流信息 -->
			<van-steps direction="vertical" :active="0" v-if="info.status == -2 || info.status == -3&&info.back&&info.back.express">
				<van-step v-for="item in info.back.express" >
					<h3>{{ item.status }}</h3>
					<p>{{ item.time }}</p>
				</van-step>
			</van-steps>
		</section>
	</section>
</template>

<script setup>
	const route = useRoute();
	const { cookies } = useCookies();
	const goBack = () => {
		history.back();
	};
	const orderproid = ref(route.query.orderproid ?? 0);
	const orderid = ref(route.query.orderid ?? 0);
	const info = ref({});
	const LoginUser = reactive(cookies.get("LoginUser"));
	onBeforeMount(() => {
		getInfoData();
	});
	const getInfoData = async () => {
		let result = await Api.business.orderInfo({
			orderid: orderid.value,
			busid: LoginUser.id,
			orderproid: orderproid.value,
		});
		if (result.code == 1) {
			info.value = result.data;
		} else {
			showFailToast(result.msg);
		}
	};
</script>

<style lang="scss" scoped>
	.van-cell-group {
		.van-cell {
			::v-deep .van-cell__value {
				color: #000;
				flex: 3;
				text-align: left;
				.van-cell {
					margin: 0;
					padding: 0;
					.van-cell__title {
						flex: 1.8;
						color: #000;
						font-weight: bold;
						font-size: 18px;
					}
					.van-cell__value {
						color: rgb(150, 151, 153);
					}
				}
				.lable {
					color: rgb(150, 151, 153);
					padding: 5px 0;
				}
			}
		}
	}
	@import url("/assets/css/info.css");
</style>